<template>
  <div>
    <div class="list" @click="searchIdx(idx)">
      <div class="img-info">
        <img v-lazy="imgUrl + '?param=200y200'" alt />
        <span class="time">{{ updateTime }}</span>
      </div>
      <div class="list-con">
        <div class="info" v-for="(item, index) in tracks" :key="index">
          {{index + 1 + '.'}}
          <span>{{item.first}}</span> -
          <span>{{item.second}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  props: {
    imgUrl: {
      type: String
    },
    tracks: {
      type: Array
    },
    updateTime: {
      type: String
    },
    idx: {
      type: String
    }
  },
  methods: {
    searchIdx(idx) {
      switch (idx) {
        case "云音乐新歌榜":
          idx = 0;
          break;
        case "云音乐热歌榜":
          idx = 1;
          break;
        case "网易原创歌曲榜":
          idx = 2;
          break;
        case "云音乐飙升榜":
          idx = 3;
          break;
        case "云音乐说唱榜":
          idx = 23;
          break;
        case "云音乐ACG音乐榜":
          idx = 22;
          break;
        case "KTV唛榜":
          idx = 7;
          break;
        case "iTunes榜":
          idx = 8;
          break;
        case "日本Oricon周榜":
          idx = 10;
          break;
        case "Hit FM Top榜":
          idx = 9;
          break;
        case "台湾Hito排行榜":
          idx = 20;
          break;
        case "Beatport全球电子舞曲榜":
          idx = 21;
          break;
        case "法国 NRJ Vos Hits 周榜":
          idx = 20;
          break;
        case "UK排行榜":
          idx = 5;
          break;
        case "美国Billboard周榜":
          idx = 6;
          break;
      }
      this.$emit("showIdxPage", idx);
    }
  }
};
</script>

<style lang="less" scoped>
.list {
  display: flex;
  align-items: center;
  margin: 0 20px;
  padding-top: 20px;
  .img-info {
    position: relative;
    width: 100px;
    height: 0;
    padding-bottom: 100px;

    overflow: hidden;
    img {
      width: 100px;
      height: 100px;
    }
    .time {
      position: absolute;
      bottom: 5px;
      left: 1px;
      font-size: 12px;
      color: #fff;
      transform: scale(0.8);
    }
  }
  .list-con {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 0 20px;
    height: 100px;
    overflow: hidden;
    background: #333;
    color: #fff;
    font-size: 12px;
    .info {
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      line-height: 26px;
    }
  }
}
</style>